<template>
  <div class="nav">
    <div class="mid-width">
      <el-row :gutter="20">
        <el-col :span="2">
          <span class="logo ">Cube</span>
        </el-col>
        <el-col :span="10">
          <ul class="navbar">
            <li v-for="(item, index) in navs" :key="index">
              <router-link tag="a" :to="{path:item.url, query:{'typeId':item.typeId}}"><i :class="item.ico"></i>&nbsp;&nbsp;&nbsp;{{item.navTit}}
              </router-link>
            </li>
          </ul>
        </el-col>
        <el-col :span="4" :offset="4">
          <el-input
            placeholder="请输入内容"
            suffix-icon="el-icon-search"
            v-model="input1">
          </el-input>
        </el-col>
        <el-col :span="2"><span>登录</span></el-col>
        <el-col :span="1"><span><i class="fa fa-qq"></i></span></el-col>
        <el-col :span="1"><span><i class="fa fa-wechat"></i></span></el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
  import vm from '@/event'

  export default {
    name: "navbar",
    data() {
      return {
        input1: "",
        activeIndex: '1',
        activeIndex2: '1',
        navs: [
          {
            navId: 0,
            navTit: "首页",
            url: "/index",
            ico: "el-icon-s-home"
          },
          {
            navId: 1,
            navTit: "文章",
            url: "/list",
            typeId: 1,
            ico: "el-icon-s-cooperation"
          },
          {
            navId: 2,
            navTit: "博语",
            url: "/list",
            typeId: 2,
            ico: "el-icon-s-flag"
          },
          {
            navId: 3,
            navTit: "相册",
            url: "/lands",
            typeId: 4,
            ico: "el-icon-s-check"
          }
        ]
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      sendData() {
        this.$http.get(`${baseConfig.xxkUrl}`)
          .then(function (res) {
            console.log(res)
          })
          .catch(err => {
              console.log(err)
            }
          )
      }
    },
    mounted() {
      //this.sendData()
    }
  }
</script>

<style lang="less" scoped>
  .nav {
    background: #0f5ba9;
    height: 60px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    span {
      line-height: 60px;
      color: #fff;
      &.logo {
        font-size: 30px;
      }
    }
    .navbar {
      display: flex;
      flex-direction: column-reverse;
      flex-wrap: wrap;
      height: 60px;
      li {
        line-height: 60px;
        text-align: center;

        &:hover {
          background: rgba(0, 0, 0, .2);
        }
        a {
          display: block;
          color: #fff;
          text-decoration: none;
        }
      }
    }
    .el-input {
      margin-top: 10px;
    }
  }

</style>
